<!DOCTYPE html>
<html>

<head>
	<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="">
	<meta name="format-detection" content="telephone=no">
	<meta charset="UTF-8">
	<title>手机端H5选座</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		body {
			background: #0f0f0f;
		}

		.container {
			width: auto;
			margin: 0 auto;
		}

		.h-date {
			background: #ffffff;
			font-size: 30px;
			height: 80px;
			line-height: 80px;
			text-align: center;
		}

		.h-sign {
			padding: 20px;
			border-bottom: 1px solid #999;
		}

		.h-sign span {
			width: 25px;
			height: 20px;
			color: #ffffff;
			display: inline-block;
			/*行级块元素 给没有内容的行级元素留出空间  因为行级元素的宽高由内容撑的*/
			font-size: 14px;
			vertical-align: middle;
			/*文本垂直居中 */
		}

		.h-sign span:nth-child(even) {
			width: auto;
		}

		.container .empty {
			/* 空座位 */
			background: #ffffff;
		}

		.container .selected {
			/* 选中座位 */
			background: red;
		}

		.container .sold {
			/* 不可选座位 */
			background: blue;
		}

		.container .unvis {
			/* 不显示座位 */
			visibility: hidden;
		}

		.clear-fix::after {
			/*清除浮动*/
			content: "";
			clear: both;
			display: block;
			height: auto;
		}

		.content {
			width: auto;
			position: relative;
			/* min-height: 100%;*/
			border-bottom: 1px solid #999999;
		}
		.content ul {
			white-space:nowrap;
		}
		.content li {
			background: #ffffff;
			width: 45px;
			height: 35px;
			margin: 20px 10px;
			display: inline-block;
		}

		/* .content li:nth-child(6) {
			margin-left: 110px;
		} */

		.s-bar {
			background: #333333;
			/* position: fixed; */
			/*固定定位*/
			height: auto;
			min-height: 80px;
			width: auto;
		}

		.text {
			margin: 5px 5px;
		}

		.text span {
			color: #ffffff;
			font-size: 16px;
		}

		.text span:nth-child(1) {
			float: left;
		}

		.text span:nth-child(2) {
			float: right;
		}

		.adds li {
			color: #ff9900;
			float: left;
			border: 1px solid #ff9900;
			padding: 5px;
			margin: 5px 10px;
			font-size: 16px;
		}

		.footer {
			height: auto;
			width: auto;
			background: #888;
			line-height: 80px;
			/* position: fixed; */
			bottom: 0;
		}

		.f-left {
			color: #ffffff;
			font-size: 16px;
			float: left;
		}

		.f-right {
			background: #ff9900;
			color: #333333;
			width: auto;
			height: 80px;
			line-height: 80px;
			text-align: center;
			font-size: 20px;
		}
	</style>
</head>

<body>
	<div class="container clear-fix">
		<div class="header">
			<div class="h-date"></div>
			<div class="h-sign">
				<span class="empty"></span>
				<span>可选</span>
				<span class="selected"></span>
				<span>已选</span>
				<span class="sold"></span>
				<span>已售</span>
			</div>
		</div>
		<div class="content clear-fix">
			<!--<ul>
                <li></li>
                <li></li>
                <li></li>
                <li class="selected"></li>
                <li></li>
                <li class="sold"></li>
                <li></li>
                <li class="selected"></li>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li class="sold"></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="sold"></li>
                <li class="selected"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>-->
			<!--这是为了实现静态布局写的，布局完成后 其内容由jQuery动态生成-->
		</div>
		<div class="s-bar">
			<div class="text clear-fix">
				<span>已选座位</span>
				<span>最多可选择5个座位</span>
			</div>
			<div class="adds clear-fix">
				<ul class="clear-fix finalselect">
					<!--<li>3排6座</li>
                  <li>3排6座</li>-->
				</ul>
			</div>
		</div>
		<div class="footer clear-fix">
			<div class="f-left">
				<span>合计：</span>
				<span class="total-price"></span>
				<span class="price-count"></span>
			</div>
		</div>
		<div class="f-right">
			确认选座
		</div>
	</div>
	<script src="./jquery-3.3.1.min.js"></script>
	<script>
		var myDate = new Date(); //获取当前时间
		var thisMonth = myDate.getMonth();
		var thisDate = myDate.getDate();
		var thisHouver = myDate.getHours();
		var thisMinute = myDate.getMinutes();
		$('.h-date').html('今天是' + thisMonth + '月' + thisDate + '日' + thisHouver + ':' + thisMinute);

		var cListHtml = ""; //存储动态生成的座位
		/* 座位信息：-1：不可见，0：可选，1：已选，2：我选的 */
		var seatList = new Array([-1, 0, 0, 1, 0, -1,-1], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0,
			0, 0, 0
		], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]);

		var htmArr = []; //定义一个数组 用来存储被选中的座位信息
		for (var i = 0; i < seatList.length; i++) {
			cListHtml += "<ul class='clear-fix'>";
			for (var j = 0; j < seatList[i].length; j++) {
				if (seatList[i][j] == -1) {
					cListHtml += "<li class='unvis' sign='" + (i + 1) + "排" + (j + 1) + "座'></li>"
				} else if (seatList[i][j] == 0) {
					cListHtml += "<li class='empty' sign='" + (i + 1) + "排" + (j + 1) + "座'></li>"
				} else if (seatList[i][j] == 1) {
					cListHtml += "<li class='sold' sign='" + (i + 1) + "排" + (j + 1) + "座'></li>"; /*sign用来存储座位信息*/
				} else {
					cListHtml += "<li class='selected' sign='" + (i + 1) + "排" + (j + 1) + "座'></li>"; /*sign用来存储座位信息*/
				}
			}
			cListHtml += "</ul>"
		}
		$(".content").html(cListHtml);
		$(".content li").on("click", function () {
			if ((htmArr.length >= 5 && !$(this).hasClass("selected"))) {
				alert("超出范围");
			} else if ($(this).hasClass("sold")) {
				alert("此座位已经被占了");
			} else {
				$(this).toggleClass("selected").toggleClass("empty");
				if ($(this).hasClass("empty")) { //又变回可选状态时 从选中区移除
					removeArr($(this).attr('sign'));
				} else { //否则添加到选中区
					htmArr.push($(this).attr('sign'));
				}
				var price = 100;
				var total = htmArr.length * price;
				$('.total-price').html('￥' + total);
				$('.price-count').html('￥' + htmArr.length + '*100')
			}
			addArr();
		});

		function removeArr(key) { //自定义方法，用来取消用户之前选中的座位
			for (var i = 0; i < htmArr.length; i++) {
				if (htmArr[i] == key) {
					htmArr.splice(i, 1); //移除第i个元素
				}
			}
		}

		function addArr() { //自定义方法 用来记录选中的座位信息
			var thisHtml = "";
			for (var i = 0; i < htmArr.length; i++) {
				thisHtml += "<li>" + htmArr[i] + "</li>"
			}
			$(".adds ul").html(thisHtml);
		}

		$(".f-right").on('click', function () {
			var ss=new Array();
			$('.finalselect').find('li').each(function(){
				var dd=$(this).text();
				var dd2=dd.replace("座","");
				var dd3=dd2.replace("排","-");
				ss.push(dd3);
			});
			if(ss == undefined || ss == '' || ss  == "" || ss == null){
				alert("请选择座位");
			}else{
				alert(ss);
			}
			console.log(ss);
		});
	</script>
</body>

</html>